import React from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { message } from 'antd';
import { Row, Col } from 'antd';
import { SimpleQuarterC, FirstHeaderC, SecondHeaderC } from '../../comps';

class SimpleQuarterCDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <Row style={{ padding: '20px' }}>
        <FirstHeaderC title='时间选择组件，支持季度选择' />
        <Col span={6}>
          <SecondHeaderC title='年份选择需晚于当前年份' />
          <SimpleQuarterC
            dataIndex='select1' // Form识别的Item ID
            yearKey='year1'
            form={this.props.form} // form对象
            quarterKey='quarter1'
            title='报告时间'
            highCurrentDate={false}
            onQuarterChange={(data) => {
              console.log(data);
            }}
          />
        </Col>
        <Col span={6}>
          <SecondHeaderC title='lackDate-判断日期是否完整，true-缺少，false-完整' />
          <SimpleQuarterC
            form={this.props.form} // form对象
            dataIndex='select2' // Form识别的Item ID
            yearKey='year2'
            quarterKey='quarter2'
            title='报告时间'
            onQuarterChange={(data) => {
              if (data.lackDate) {
                message.warning('请选择季度');
              }
            }}
          />
        </Col>
        <Col span={6}>
          <SecondHeaderC title='有默认值-年份选择需早于当前年份' />
          <SimpleQuarterC
            form={this.props.form} // form对象
            dataIndex='select3' // Form识别的Item ID
            yearKey='year3'
            quarterKey='quarter3'
            title='报告时间'
            highCurrentDate={true}
            initialValueYear={'2021'}
            initialValueQuarter={'1'}
            onQuarterChange={(data) => {
              console.log(data);
            }}
          />
        </Col>
      </Row>
    );
  }
}

export default Form.create()(SimpleQuarterCDemo);
